<template>
  <div>
    <h1>如何获取仓库的数据</h1>
    <hr />
    <div>
      <h1>获取仓库数据最笨的方法</h1>
      <h2>{{ $store.state.list }}</h2>
    </div>
    <div>
      <h1>稍微简单一些获取仓库数据---computed</h1>
      <h2>{{ erha }}</h2>
    </div>
    <div>
      <h1>使用辅助函数mapState获取仓库数据---mapState</h1>
      <h2>{{ list }}</h2>
    </div>
    <hr />
    <div>
      <h1>组件获取仓库中计算属性的数据---getters</h1>
      <h2>{{ $store.getters.arr }}</h2>
    </div>
    <div>
       <h1> 组件获取仓库中计算属性的数据getters简单的写法</h1>
       <h2>{{arr}}</h2>
    </div>
  </div>
</template>

<script>
//mapState方法，vuex怎么暴露的（分别暴露：大花括号）

import { mapState,mapGetters} from "vuex";
//mapState函数执行，需要传递参数，要么是数组，要么是对象
export default {
  name: "",
  //计算属性
  computed: {
    //组件实例添加新的属性,属性值是仓库里面的数据
    erha() {
      return this.$store.state.list;
    },
    //mapState方法执行，需要传递一个参数:可以数组、对象！！！,mapState返回一个对象
    //前面需要...，ES拓展运算符（浅拷贝）,可以把仓库数据让组件获取到，直接作为组件实例的属性，可以直接使用！！！
    //但是需要注意，数组里面元素，即为仓库数据K，数组里面的元素不能瞎写、不能胡写、不能乱写！！！
    //相当于给组件实例添加一个新的属性list,数值为仓库list数据！！！
    ...mapState(["list"]),
    ...mapGetters(['arr'])
  },
};
</script>

<style scoped>
</style>
